<template>
	<view class="register">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714" />
		<view class="content">
			<view class="title">找回密码</view>
			<view class="item">
				<view class="key">账号</view>
				<view class="input_cell">
					<input type="text" placeholder="请输入邮箱" v-model="form.phone">
				</view>
				<view class="code_box">
					<input type="text" placeholder="请输入验证码" class="code_input" v-model="form.code">
					<view class="btn" v-if="isTimer">{{time}}s</view>
					<view class="btn" @click="getCode(form.phone,'register')" v-else>获取</view>
				</view>
			</view>
			<view class="item">
				<view class="key">登录密码</view>
				<view class="input_cell">
					<input type="text" password placeholder="请输入6-12位数字+字母密码" v-model="form.password">
				</view>
			</view>
			<view class="item">
				<view class="key">交易密码</view>
				<view class="input_cell">
					<input type="text" password placeholder="请输入6位数字交易密码" v-model="form.pay_password">
				</view>
				<!-- <view class="code_view">
					<uv-code-input mode="box" color="#fff" dot @finish="finish"></uv-code-input>
				</view> -->
			</view>
			<view class="submit" @click="submit">确认</view>
			<view class="desc" @click="checkbox=!checkbox">
				<image src="@/static/images/checked.png" v-if="checkbox"></image>
				<image src="@/static/images/checkbox.png" v-else></image>
				<view>我已同意并遵守平台<text @click.stop="router('/pages/login/article?key=use_provision')">《使用条款》</text>和<text
						@click.stop="router('/pages/login/article?key=privacy')">《隐私条款》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		register
	} from "@/request/api";
	import {
		ref,
		reactive
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	import useEditUser from "@/hooks/useEditUser.js";
	const {
		timer,
		time,
		isTimer,
		getCode
	} = useEditUser();
	const checkbox = ref(false);
	const form = reactive({
		phone: "",
		code: "",
		password: "",
		pay_password: "",
		invitation_code: ""
	});
	const submit = async () => {
		if (!checkbox.value) {
			uni.$uv.toast("请先阅读协议");
			return
		}
		await register(form);
		uni.$uv.toast("操作成功");
		setTimeout(() => {
			uni.redirectTo({
				url: "/pages/login/login",
			})
		}, 1500);
	};
</script>

<style scoped lang="scss">
	.register {
		.content {
			padding: 0 60rpx;
			box-sizing: border-box;

			.title {
				color: #FFFFFF;
				font-size: 62rpx;
				font-weight: bold;
				padding: 60rpx 0 110rpx;
				box-sizing: border-box;
			}

			.item {
				margin-bottom: 50rpx;

				.key {
					color: #FFFFFF;
					font-size: 24rpx;
					padding-left: 4rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
				}

				.input_cell {
					height: 110rpx;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					background: #2F2F2F;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						color: #999999;
						font-size: 36rpx;

					}

					.icon {
						padding-left: 40rpx;
						box-sizing: border-box;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.code_view {
					display: flex;
					// justify-content: center;
				}

				.code_box {
					height: 110rpx;
					display: flex;
					justify-content: space-between;

					.code_input {
						height: 110rpx;
						width: 400rpx;
						color: #999999;
						font-size: 36rpx;
						border-radius: 20rpx;
						padding: 0 40rpx;
						box-sizing: border-box;
						background: #2F2F2F;
					}

					.btn {
						width: 215rpx;
						height: 110rpx;
						line-height: 110rpx;
						text-align: center;
						color: #DDF247;
						font-size: 36rpx;
						border-radius: 20rpx;
						background: #2F2F2F;
					}
				}
			}

			.submit {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #111111;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;
			}

			.desc {
				margin-top: 120rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					color: #999999;
					font-size: 26rpx;
					padding-left: 12rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>